<template>
	<div>
		<a-card :bordered="false" class="search-form">
			<form-row label="类型">
				<a-form-item>
					<tag-select>
						<tag-select-option>Bug</tag-select-option>
						<tag-select-option>Css</tag-select-option>
						<tag-select-option>Git</tag-select-option>
						<tag-select-option>JavaScript</tag-select-option>
						<tag-select-option>Vue</tag-select-option>
						<tag-select-option>Map</tag-select-option>
						<tag-select-option>webSocket</tag-select-option>
						<tag-select-option>uniApp</tag-select-option>
						<tag-select-option>Ztree</tag-select-option>
						<tag-select-option>前端面试题</tag-select-option>
						<tag-select-option>类目八</tag-select-option>
						<tag-select-option>类目九</tag-select-option>
						<tag-select-option>类目十</tag-select-option>
						<tag-select-option>类目十一</tag-select-option>
						<tag-select-option>类目十二</tag-select-option>
						<tag-select-option>类目十三</tag-select-option>
						<tag-select-option>类目十四</tag-select-option>
					</tag-select>
				</a-form-item>
			</form-row>

			<a-list itemLayout="vertical">
				<a-list-item :key="n" v-for="n in 3">
					<a-list-item-meta title="Web前端300道面试题整理，含答案，快来学习吧～">
						<div slot="description">
							<a-tag color="cyan">web前端</a-tag>
							<a-tag color="cyan">面试题</a-tag>
							<a-tag color="cyan">JavaScript</a-tag>
						</div>
					</a-list-item-meta>
					<div class="content">
						<div class="detail">
							段落示意：蚂蚁金服设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。蚂蚁金服设计平台
							ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案，提供跨越设计与开发的体验解决方案，提供跨越设计与开发的体验解决方案。
						</div>
						<div class="author">
							<a-avatar size="small" :src="require('../../assets/img/logo2.png')" />
							<a>Kevin Chou</a><em>2018-08-05 22:23</em>
							发布
						</div>
					</div>
					<span slot="actions"><a-icon style="margin-right: 8px" type="star-o" />156</span>
					<span slot="actions"><a-icon style="margin-right: 8px" type="like-o" />1435</span>
					<span slot="actions"><a-icon style="margin-right: 8px" type="message" />4</span>
				</a-list-item>
			</a-list>
			<a-pagination size="small" :total="50" show-size-changer show-quick-jumper style="text-align: center; margin-top: 20px;"/>
		</a-card>
	</div>
</template>

<script>
	import TagSelect from '../../components/tool/TagSelect'
	import FormRow from '../../components/form/FormRow'
	
	const TagSelectOption = TagSelect.Option
	export default {
		name: 'ArticleList',
		components: {
			FormRow, TagSelectOption, TagSelect
		}
	}
</script>

<style lang="less" scoped>
	.extra {
		width: 272px;
		height: 1px;
	}

	/deep/ .ant-list-item-action {
		text-align: right;
	}

	/deep/ .a-list-item {
		cursor: pointer;
	}
	.content {
		.detail {
			line-height: 22px;
			max-width: 720px;
		}

		.author {
			color: @text-color-second;
			margin-top: 16px;
			line-height: 22px;

			&> :global(.ant-avatar) {
				vertical-align: top;
				margin-right: 8px;
				width: 20px;
				height: 20px;
				position: relative;
				top: 1px;
			}

			&>em {
				color: @disabled-color;
				font-style: normal;
				margin: 0 5px;
			}
		}
	}
</style>
